<template>
  <div class="adminList">

    <!-- 筛选表单 -->
    <el-form class="searchForm" label-width="70px">
      <el-form-item label="用户名">
        <el-input v-model="searchForm.username" type="input" placeholder="请输入用户名" size="mini" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="searchForm.authorityId" size="mini" placeholder="请选择角色">
          <el-option
            v-for="item in adminRoleList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="searchForm.createDate"
          type="daterange"
          size="mini"
          start-placeholder="请选择开始日期"
          end-placeholder="请选择结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button-group class="button-group">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">筛选</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="handleResetSearchForm">重置</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="authorityId !== 1" @click="handleAdd">新增</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="adminList"
      :header-cell-style="{'text-align': 'center','background': 'rgb(248 248 248)'}"
      :cell-style="{'text-align': 'center'}"
    >
      <el-table-column label="编号" prop="id" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="角色">
        <template slot-scope="scope">
          <el-tag>{{ adminRoleList[scope.row.authorityId - 1].label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="createDate" />
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button-group class="button-group">
            <el-button type="warning" size="mini" :loading="isButtonLoading" :disabled="adminId === scope.row.id || authorityId > scope.row.authorityId" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" :loading="isButtonLoading" :disabled="adminId === scope.row.id || authorityId > scope.row.authorityId" @click="handleDelete(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10,15,20,25,30]"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right;margin-right: 10px;"
      @current-change="handleChange"
      @size-change="handleSizeChange"
    />

    <!-- 新增/修改对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isDialogVisible"
      @close="getAdminList"
    >
      <el-form
        ref="form"
        label-width="70px"
        :rules="rules"
        :model="adminForm"
        hide-required-asterisk
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="adminForm.username" type="input" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item v-if="dialogType === 'add'" label="密码" prop="password">
          <el-input v-model="adminForm.password" type="input" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="角色" prop="authorityId">
          <el-select v-model="adminForm.authorityId" placeholder="请选择角色">
            <el-option
              v-for="item in adminRoleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value === 0"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="评论日期">
          <el-date-picker
            v-model="adminForm.createDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%;"
          />
        </el-form-item>
        <el-button style="width: 100%;" type="primary" :loading="isButtonLoading" @click="handleSubmit">确定</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getAdminList, updateAdmin, register, deleteAdmin } from '@/api/admin'
import { mapGetters } from 'vuex'
import { getDictList } from '@/api/dict'
export default {
  name: 'AdminList',
  data() {
    return {
      adminList: [],
      total: undefined,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        username: undefined,
        authorityId: undefined,
        createDate: undefined
      },
      dialogTitle: undefined,
      isDialogVisible: false,
      dialogType: undefined,
      adminForm: {
        username: undefined,
        password: undefined,
        authorityId: undefined,
        createDate: undefined
      },
      rules: {
        username: [{
          message: '请输入用户名',
          required: true,
          trigger: 'blur'
        }],
        password: [{
          message: '请输入密码',
          required: true,
          trigger: 'blur'
        }],
        authorityId: [{
          message: '请选择角色',
          required: true,
          trigger: 'blur'
        }]
      },
      isButtonLoading: false,
      adminRoleList: []
    }
  },
  computed: {
    ...mapGetters(['authorityId', 'adminId'])
  },
  beforeMount() {
    this.getAdminRoleList()
    this.getAdminList()
  },
  methods: {
    async getAdminRoleList() {
      const { data } = await getDictList({
        searches: [
          {
            key: 'type',
            rule: '=',
            value: 'admin_role'
          }
        ]
      })
      this.adminRoleList = data
    },
    handleSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.getAdminList()
    },
    handleDelete(row) {
      this.$confirm(`确定要删除编号为${row.id}的数据吗?`, '提示').then(() => {
        this.isButtonLoading = true
        deleteAdmin([row.id]).then(() => {}, () => {}).finally(() => {
          this.isButtonLoading = false
          this.getAdminList()
        })
      }, () => {})
    },
    handleAdd() {
      this.dialogType = 'add'
      this.dialogTitle = '新增用户'
      this.isDialogVisible = true
      this.adminForm = {
        username: undefined,
        password: undefined,
        authorityId: undefined,
        createDate: undefined
      }
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.dialogType === 'edit') {
            this.isButtonLoading = true
            updateAdmin(this.adminForm).then(() => {}, () => {}).finally(() => {
              this.isButtonLoading = false
              this.isDialogVisible = false
              this.getAdminList()
            })
          } else {
            this.adminForm.createDate = new Date()
            register(this.adminForm).then(() => {}, () => {}).finally(() => {
              this.isButtonLoading = false
              this.isDialogVisible = false
              this.getAdminList()
            })
          }
        } else {
          console.log('表单验证有误')
        }
      })
    },
    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTitle = '修改用户'
      this.isDialogVisible = true
      this.adminForm = row
    },
    handleResetSearchForm() {
      this.searchForm = {
        username: undefined,
        authorityId: undefined,
        createDate: undefined
      }
      this.getAdminList()
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getAdminList()
    },
    handleChange(value) {
      this.pageNum = value
      this.getAdminList()
    },
    async getAdminList() {
      const searchParam = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searches: [
          {
            key: 'id',
            rule: '=',
            value: this.searchForm.id
          },
          {
            key: 'username',
            rule: 'like',
            value: this.searchForm.username
          },
          {
            key: 'authorityId',
            rule: '=',
            value: this.searchForm.authorityId
          },
          {
            key: 'createDate',
            rule: 'scope',
            value: this.searchForm.createDate
          }
        ]
      }
      const { data } = await getAdminList(searchParam)
      this.total = data.total
      this.adminList = data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.adminList {
  .searchForm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .el-form-item {
      width: 45%;
      margin-left: 5px;
      .el-select {
        width: 100%;
      }
    }
    .button-group {
      margin-left: 10px;
      width: 100%;
      justify-content: left;
    }
  }
  .button-group {
    display: flex;
    justify-content: center;
    .el-button {
       margin-right: 10px;
    }
  }
}
</style>
